<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cookie存取值</title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			ul,li{list-style-type: none;}
			.cookie {float: left;width: 100%;}
			.cookie11 {float: left;width: 100%; position: fixed;z-index: 991;top: 40px;left: 0;background: #f6f6f6;}
			.cookie11 li {height: 30px;}
			.line {width: 100%;height: 1px;background: #000;}
			.btn {float: left;width: 100%;}
			.bg {position: fixed;z-index: 991;top: 0;left: 0;height: 100%;width: 100%;background: #f6f6f6;opacity: 0.2; display: none;}
		</style>
	</head>
	<body>
		<input type="text" class="cookie" id="cookie"/>
		<div class="bg" id="bg"></div>
		<div class="cookie11" id="cookie11" style="display: none;">
			<ul id="ul"></ul>
		</div>
		<input type="submit" class="btn" onclick="setCookie('key', 'value')" />
		<input type="submit" class="btn" onclick="getCookie('key')" />
		<input type="submit" class="btn" onclick="clearCookie()" />
	</body>
	<script type="text/javascript">
		
		$("#cookie").focus(function(){
			if(document.getElementById('cookie11').style.display == 'none') {
				var arr = getCookieArray('key');
				if(arr != null){
					console.log(arr);
					var html = '';
					for (var i = 0; i < arr.length; i++) {
						html += '<li id="li">'+arr[i]+'</li>'+
								'<p class="line" id="li"></p>';
					}
					$('#ul').append(html);
					document.getElementById('cookie11').style.display = 'block';
				}
				document.getElementById('bg').style.display = 'block';
			}
		});
		
		//实时监听input的输入的变化
		$('#cookie').bind('input propertychange', function(){
			var inputText = $('#cookie').val();
			console.log(inputText);
			if(inputText.length >=3) {
				deleteAlertView();
			}
		});
		
		//点击ul的事件
		$('#ul').on("click", "li", function(){
			$('#cookie').val($(this).text());
			deleteAlertView();
		});
		
		//点击背景的事件
		$('#bg').click(function(){
			deleteAlertView();
		});
		
		function deleteAlertView() {
			document.getElementById('bg').style.display = 'none';
			$('#ul li').each(function(){                      //4、移除ul下所有li  
        			$(this).remove();  
   			 }); 
   			 $('#ul p').each(function(){                      //4、移除ul下所有li  
        			$(this).remove();  
   			 });
			document.getElementById('cookie11').style.display = 'none';
		};
		
		function setCookie(key, value) {
			var values = $('#cookie').val();
			var days = 90;//设置日期为30天
			var exp = new Date();
			var d = new Date();
			var time ="" + d.getFullYear() +(d.getMonth()+1) + d.getDate() + d.getHours() + d.getMinutes() + d.getSeconds();
			exp.setTime(exp.getTime()+days*24*60*60*1000);
			var val = document.getElementById('cookie');//获取输入的内容
			var cookieArray = getCookieArray(key);
			var arr = new Array();//创建数组
			if(cookieArray != null) {//数组不为空，cookie有数据

				for (var j = 0; j < cookieArray.length;j++) {
					if(cookieArray[j] == values) {
						return;
					}else {
						if(cookieArray.length == 10) {
							cookieArray.shift();
						}
					}
				}
				for (var i = 0; i < cookieArray.length;i++) {
					arr.push(cookieArray[i]);
				}
				arr.push(values);
			}else {				
				alert('添加');
				arr.push(values);//往数组里面添加数据
			}
			var arrStr = JSON.stringify(arr);
			document.cookie = key + "=" + escape(arrStr)+";expires="+exp.toGMTString();
		};
		
		function getCookie(name) {
			var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));			
			var arrStr = document.cookie.split(';');
			for (var i = 0; i < arrStr.length; i++) {
				var temp = arrStr[i].split("=");
				if(name === temp[0]) {
					var current = new Array();
					current = JSON.parse(unescape(temp[1]));
					alert(current);
				}
			}
		};
		
		function getCookieArray(name) {
			var arrStr = document.cookie.split(';');
			for (var i = 0; i < arrStr.length; i++) {
				var temp = arrStr[i].split("=");
				if(name === temp[0]) {
					var current = new Array();
					current = JSON.parse(unescape(temp[1]));
					return current;
				}
			}
			return null;
		};
		
		function clearCookie(){
			var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
			if(keys) {
				for (var i = 0; i < keys.length; i++) {
					document.cookie = keys[i]+'=0;expires='+new Date(0).toUTCString();
				}
			}
		};
	</script>
</html>
